<template>
  <div
    id="wallet-chart"
    class="wallet-chart-wrap"
    ref="walletChart"
    :style="{width: '100%', height: '100%'}"
  ></div>
</template>

<script>
export default {
  name: "WalletChart",
  data() {
    return {
      myChart: null,
    };
  },
  props: {
    capitalData: {
      type: Object,
    },
  },
  mounted() {
    console.log("图表数据", JSON.parse(JSON.stringify(this.capitalData)));
    this.drawLine();
  },
  methods: {
    // 绘制echarts图表
    drawLine() {
      let _this = this;
      let bar_dv = _this.$refs.walletChart;
      if (bar_dv) {
        _this.myChart = _this.echarts.init(bar_dv);
        _this.myChart.setOption({
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b}: {c} ({d}%)",
            transitionDuration: 0,
          },
          series: [
            {
              name: "资金占比",
              type: "pie",
              radius: ["42%", "60%"],
              center: ["190px", "50%"],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: "center",
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: "18",
                  fontWeight: "bold",
                },
              },
              labelLine: {
                show: false,
              },
              data: [
                {
                  value: _this.capitalData.intransit_money,
                  name: "在途金额（元）",
                },
                {
                  value: _this.capitalData.duein_agency_fee,
                  name: "待收代理费（元）",
                },

                {
                  value: _this.capitalData.duein_deposit,
                  name: "待返还订金（元）",
                },
                {
                  value: _this.capitalData.usable_money,
                  name: "可用余额（元）",
                },
              ],
            },
          ],
          color: ["#F3640E","#BFA8A1","#425563", "#057A82" ],
        });
        // 鼠标移上
        _this.myChart.on("mouseover", "series.pie", function () {
          _this.$emit("chartMouseHandle", 0);
        });
        // 鼠标移出
        _this.myChart.on("mouseout", "series.pie", function () {
          _this.$emit("chartMouseHandle", 1);
        });
      }
    },
    // 自定义触发鼠标移上/移出事件
    chartMouseover(type, index) {
      if (type) {
        this.$emit("chartMouseHandle", 0);
        this.myChart.dispatchAction({
          type: "highlight",
          dataIndex: index,
        });
      } else {
        this.$emit("chartMouseHandle", 1);
        this.myChart.dispatchAction({
          type: "downplay",
          dataIndex: index,
        });
      }
    },
  },
};
</script>

<style>
</style>